import { Button, DataSet } from 'choerodon-ui/pro';
import React from 'react';
import { connect } from 'dva';
import { ButtonColor } from 'choerodon-ui/pro/lib/button/enum';
import { StateType } from '../../model';
import DescriptionItem from '../DescriptionItem';
import styles from './index.less';

interface Step3Props {
  data? : StateType['step'];
  dispatch? : any;
  dataSet: DataSet;
}

const Step3 : React.FC<Step3Props> = (props) => {
  const { data, dispatch } = props;
  if (!data) {
    return null;
  }
  const { payAccount, receiverAccount, receiverName, amount } = props.dataSet.current?.toData();
  const onFinish = () => {
    if (dispatch) {
      dispatch({
        type: 'stepForm/saveCurrentStep',
        payload: 'info',
      });
    }
  };
  const information = (
    <div className={styles.information}>
      <DescriptionItem labelText="付款账户"> {payAccount}</DescriptionItem>
      <DescriptionItem labelText="收款账户"> {receiverAccount}</DescriptionItem>
      <DescriptionItem labelText="收款人姓名"> {receiverName}</DescriptionItem>
      <DescriptionItem labelText="转账金额">
        <p>
          <span>{amount}</span>
          <span>元</span>
        </p>
      </DescriptionItem>
    </div>
  );
  return (
    <section
      className={styles.result}
    >
      <header className={styles.header}>
        <h3 className={styles.title}>操作成功</h3>
        <h4 className={styles.subTitle}>预计两小时内到账</h4>
      </header>
      <main className={styles.main}>
        {information}
      </main>
      <footer className={styles.footer}>
        <Button color={ButtonColor.primary} onClick={onFinish}>
          再转一笔
        </Button>
        <Button>查看账单</Button>
      </footer>
    </section>
  );
};

export default connect(({ stepForm } : { stepForm : StateType }) => ({
  data: stepForm.step,
}))(Step3);
